<template>
  <!-- 主体区域 -->
  <div class="main">
    <!-- 热门推荐 -->
    <div class="n-rcmd">
      <!-- 标题 -->
      <div class="n-hd">
        <router-link to="/discover/playlist" class="n-title">热门推荐</router-link>
        <div class="tab">
          <a
            :href="item.link"
            class="tab-link"
            v-for="(item, i) in tabLink"
            :key="item.title"
            @click.prevent="$router.push(item.link)"
            >{{ item.title }}<span v-if="i !== tabLink.length - 1">|</span></a
          >
        </div>
        <span class="more">
          <router-link to="/discover/playlist">更多</router-link>
          <em class="more-arrow"></em
        ></span>
      </div>
      <!-- 推荐 -->
      <ul class="rcmd-list">
        <li v-for="item in rcmdList" :key="item.id">
          <router-link :to="'/playlist?id=' + item.id" class="img-link" :title="item.name">
            <img :src="item.picUrl" alt="" />
            <div class="msk"></div>
            <div class="bottom">
              <span class="icon-head u-iconall"></span>
              <span class="play-count">{{ item.playCount | CountFormat }}</span>
              <a
                href="javascript:void(0);"
                class="play u-iconall"
                @click.prevent="setSongList(item.id)"
              ></a>
            </div>
          </router-link>
          <p class="desc">
            <router-link :to="'/playlist?id=' + item.id">{{ item.name }}</router-link>
          </p>
        </li>
      </ul>
      <!-- 新碟上架 -->
      <AlbumNewest></AlbumNewest>
      <!-- 榜单 -->
      <BillList></BillList>
    </div>
  </div>
</template>

<script>
import AlbumNewest from './Newest/AlbumNewest.vue'
import BillList from './BillList/BillList.vue'
import { RcmdList } from '@/api/home.js'
import { playList } from '@/api/playlist.js'
import { CountFormat } from '@/utils/filters.js'
export default {
  components: {
    AlbumNewest,
    BillList
  },
  data() {
    return {
      // 热门推荐数据
      rcmdList: null,
      // 热门推荐链接
      tabLink: [
        { link: '/discover/playlist/?cat=华语&order=hot', title: '华语' },
        { link: '/discover/playlist/?cat=流行&order=hot', title: '流行' },
        { link: '/discover/playlist/?cat=摇滚&order=hot', title: '摇滚' },
        { link: '/discover/playlist/?cat=民谣&order=hot', title: '民谣' },
        { link: '/discover/playlist/?cat=电子&order=hot', title: '电子' }
      ]
    }
  },
  methods: {
    // 获取热门推荐数据
    async getRcmdList() {
      const { data } = await RcmdList(8)
      this.rcmdList = data.result
    },
    // 更换歌单的播放列表
    async setSongList(id) {
      const { data } = await playList(id)
      const tracks = data.playlist.tracks
      this.$store.commit('Music/setplayerSettingIndex', 0)
      this.$store.commit('Music/setSongList', tracks)
    }
  },
  created() {
    this.getRcmdList()
  },
  filters: { CountFormat }
}
</script>

<style lang="less" scoped>
@import './content.less';
</style>
